import React from 'react'
//轮播图插件引入
import { Carousel, WingBlank } from 'antd-mobile';
// 引入axios用于发送请求
// import axios from 'axios'
import {request,baseURL} from '../../utils/request'

//导航图片路径
import img01 from '../../assets/images/nav-1.png'
import img02 from '../../assets/images/nav-2.png'
import img03 from '../../assets/images/nav-2.png'
import img04 from '../../assets/images/nav-4.png'
import  styles from './index.module.scss'
import SearchInput from '../../components/Searchinput'
class Index extends React.Component {
    state = {
        swiperData: [],
        groupData:[],
        newsData:[],
        imgHeight: '56.53vw',
        // 导航渲染
        entryData:[
            {id:1,text:'整租',img_src:img01},
            {id:2,text:'合租',img_src:img02},
            {id:3,text:'地图找房',img_src:img03},
            {id:4,text:'去出租',img_src:img04}
        ]
      }
      componentDidMount(){
          this.getSwiperData()
          this.getGroupData()
          this.getNewsData()
      }
      getSwiperData(){
        request.get('/home/swiper').then(res=>{
            console.log(res.data.body);
            this.setState({swiperData:res.data.body})
        })
      }

      getGroupData(){
        request.get('/home/groups?area=AREA%7C88cff55c-aaa4-e2e0').then(res=>{
            console.log(res.data.body);
           this.setState({groupData:res.data.body})
        })
      }
      getNewsData(){
        request.get('/home/news?area=AREA%7C88cff55c-aaa4-e2e0').then(res=>{
            console.log(res.data.body);
           this.setState({newsData:res.data.body})
        })
      }
    render() { 
        const {imgHeight,swiperData,entryData,groupData,newsData}=this.state
        return (
            <section className={styles.index}>
            {/* 轮播图模块 */}
            <div style={{height:imgHeight}}>
           <div className={styles.search_index}><SearchInput></SearchInput></div>
                {!!swiperData.length &&
        <Carousel
          autoplay={true}
          infinite
        //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
        //   afterChange={index => console.log('slide to', index)}
        >
          {this.state.swiperData.map(item => (
            <a
              key={item.id}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={baseURL+item.imgSrc}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
  }
  </div>
  {/* 导航栏模块 */}
  <div className={styles.entry}>
      {this.state.entryData.map(item=>{ 
          return  <div key={item.id} className={styles.entry_item}>
          <img src={item.img_src} alt="" className={styles.entry_item_img}/>
          <span className={styles.entry_item_text}>{item.text}</span>
      </div>
      })}
  </div>
           {/* 租房小组 */}
           <div className={styles.group}>
               <div className={styles.group_head}>
                   <h3>租房小组</h3>
                   <span>更多</span>
               </div>
               <div className={styles.group_body}>
                   {groupData.map(item=>{
                       return    <div key={item.id} className={styles.group_body_item}>
                       <div className={styles.group_body_item_info}>
                   <h4>{item.title}</h4>
                   <p>{item.desc}</p>
                       </div>
                       <img  src={baseURL+item.imgSrc} alt="" className={styles.group_body_item_img}/>
                       
                   </div>
                   })}
               </div>
           </div>
            {/* 最新资讯 */}
            <div className={styles.news}>
                <div className={styles.news_head}>
                    <h3>最新资讯</h3>
                </div>
                <div className={styles.news_list}>
                    {newsData.map(item=>{
                        return   <div key={item.id} className={styles.news_item}>
                        <img src={baseURL+item.imgSrc} alt="" className={styles.news_item_img}/>
                        <div className={styles.news_item_info}>
                    <h4>{item.title}</h4>
                            <p>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                            </p>
                        </div>
                    </div>
                    })}
                </div>
            </div>
            </section>
        );
    }
}
 
export default Index;